<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>炫酷 Tud0 特效</title>
  <!-- 引入 Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入 Font Awesome 图标 -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 配置 Tailwind 自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            neonPurple: '#9D4EDD',
            neonPink: '#C77DFF',
            neonBlue: '#4CC9F0',
            neonCyan: '#4895EF',
            darkBg: '#0A0E17',
          },
          fontFamily: {
            cyber: ['"Orbitron"', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow-neon {
        text-shadow: 0 0 5px theme('colors.neonPink'), 
                     0 0 10px theme('colors.neonPink'), 
                     0 0 20px theme('colors.neonPink'), 
                     0 0 40px theme('colors.neonPurple'), 
                     0 0 80px theme('colors.neonPurple');
      }
      .text-shadow-neon-hover {
        text-shadow: 0 0 5px theme('colors.neonBlue'), 
                     0 0 10px theme('colors.neonBlue'), 
                     0 0 20px theme('colors.neonBlue'), 
                     0 0 40px theme('colors.neonCyan'), 
                     0 0 80px theme('colors.neonCyan');
      }
      .bg-grid {
        background-image: linear-gradient(rgba(76, 201, 240, 0.1) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(76, 201, 240, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
      }
      .border-neon {
        box-shadow: 0 0 5px theme('colors.neonBlue'), 
                    0 0 10px theme('colors.neonBlue');
      }
    }
  </style>
  <!-- 引入谷歌字体 Orbitron (科技感字体) -->
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
  <style>
    /* 粒子背景样式 */
    #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 0;
      opacity: 0.7;
    }
    /* Tud0 文字动画 */
    .tud0-letter {
      display: inline-block;
      transition: all 0.3s ease;
      transform-origin: center;
    }
    .tud0-container:hover .tud0-letter {
      transform: scale(1.2) rotate(5deg);
      margin: 0 10px;
    }
    /* 脉冲动画 */
    @keyframes pulse-glow {
      0% {
        box-shadow: 0 0 5px theme('colors.neonPink'), 
                    0 0 10px theme('colors.neonPink');
      }
      50% {
        box-shadow: 0 0 10px theme('colors.neonPink'), 
                    0 0 20px theme('colors.neonPink'), 
                    0 0 30px theme('colors.neonPurple');
      }
      100% {
        box-shadow: 0 0 5px theme('colors.neonPink'), 
                    0 0 10px theme('colors.neonPink');
      }
    }
    .pulse-animation {
      animation: pulse-glow 2s infinite ease-in-out;
    }
    /* 滚动条美化 */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: theme('colors.darkBg');
    }
    ::-webkit-scrollbar-thumb {
      background: theme('colors.neonPurple');
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: theme('colors.neonPink');
    }
  </style>
</head>
<body class="bg-darkBg text-white min-h-screen font-cyber relative overflow-x-hidden">
  <!-- 粒子背景容器 -->
  <div id="particles-js"></div>

  <!-- 顶部导航栏 -->
  <nav class="fixed top-0 left-0 w-full z-50 bg-darkBg/80 backdrop-blur-md border-b border-neonPurple/30">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="text-neonPink font-bold text-xl">Tud0 Lab</div>
      <div class="hidden md:flex space-x-8">
        <a href="#home" class="hover:text-neonBlue transition-colors duration-300">首页</a>
        <a href="#about" class="hover:text-neonBlue transition-colors duration-300">关于</a>
        <a href="#effects" class="hover:text-neonBlue transition-colors duration-300">特效</a>
        <a href="#contact" class="hover:text-neonBlue transition-colors duration-300">联系</a>
      </div>
      <button class="md:hidden text-neonPink text-2xl">
        <i class="fa fa-bars"></i>
      </button>
    </div>
  </nav>

  <!-- 首页英雄区 -->
  <section id="home" class="pt-32 pb-20 px-4 relative z-10">
    <div class="container mx-auto flex flex-col items-center text-center">
      <!-- 炫酷 Tud0 文字 -->
      <div class="tud0-container mb-12">
        <h1 class="text-[clamp(4rem,15vw,10rem)] font-black text-white transition-all duration-500">
          <span class="tud0-letter text-neonPink text-shadow-neon hover:text-neonBlue hover:text-shadow-neon-hover transition-all duration-300">T</span>
          <span class="tud0-letter text-neonPink text-shadow-neon hover:text-neonBlue hover:text-shadow-neon-hover transition-all duration-300">u</span>
          <span class="tud0-letter text-neonPink text-shadow-neon hover:text-neonBlue hover:text-shadow-neon-hover transition-all duration-300">d</span>
          <span class="tud0-letter text-neonPink text-shadow-neon hover:text-neonBlue hover:text-shadow-neon-hover transition-all duration-300">0</span>
        </h1>
      </div>

      <!-- 副标题 -->
      <p class="text-[clamp(1rem,3vw,1.5rem)] text-neonBlue/80 mb-10 max-w-2xl">
        探索数字世界的炫酷特效，融合科技与艺术的视觉体验
      </p>

      <!-- 按钮 -->
      <div class="flex flex-col sm:flex-row gap-4">
        <a href="#effects" class="px-8 py-3 bg-neonPurple/20 border border-neonPurple rounded-lg hover:bg-neonPurple/40 transition-all duration-300 pulse-animation">
          查看特效 <i class="fa fa-arrow-right ml-2"></i>
        </a>
        <a href="#about" class="px-8 py-3 bg-transparent border border-neonBlue rounded-lg hover:bg-neonBlue/20 transition-all duration-300 border-neon">
          了解更多 <i class="fa fa-info-circle ml-2"></i>
        </a>
      </div>
    </div>
  </section>

  <!-- 关于区域 -->
  <section id="about" class="py-20 px-4 bg-darkBg/50 backdrop-blur-sm relative z-10">
    <div class="container mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4">
          <span class="text-neonPink">关于</span> Tud0
        </h2>
        <div class="w-24 h-1 bg-gradient-to-r from-neonPink to-neonBlue mx-auto"></div>
      </div>

      <div class="grid md:grid-cols-2 gap-12 items-center">
        <div class="bg-darkBg/80 p-8 rounded-xl border border-neonPurple/30 hover:border-neonPink/60 transition-all duration-500">
          <h3 class="text-2xl font-bold mb-6 text-neonBlue">创意与科技的融合</h3>
          <p class="text-gray-300 mb-6 leading-relaxed">
            Tud0 代表着数字世界中的创意表达，通过前沿的网页技术和视觉设计，打造沉浸式的用户体验。无论是动态文字特效、粒子背景还是交互设计，都致力于将科技与艺术完美结合。
          </p>
          <p class="text-gray-300 leading-relaxed">
            这个页面展示了 Tud0 的核心视觉风格，融合了霓虹光效、未来感字体和动态交互，适配各种设备屏幕，让每个访问者都能感受到炫酷的数字美学。
          </p>
          <div class="mt-8 flex space-x-4">
            <a href="#" class="text-neonPink hover:text-neonBlue transition-colors duration-300 text-2xl">
              <i class="fa fa-github"></i>
            </a>
            <a href="#" class="text-neonPink hover:text-neonBlue transition-colors duration-300 text-2xl">
              <i class="fa fa-twitter"></i>
            </a>
            <a href="#" class="text-neonPink hover:text-neonBlue transition-colors duration-300 text-2xl">
              <i class="fa fa-instagram"></i>
            </a>
          </div>
        </div>
        <div class="bg-grid rounded-xl p-8 flex justify-center items-center">
          <div class="w-full max-w-md p-6 bg-darkBg/60 backdrop-blur-sm rounded-lg border border-neonBlue/30">
            <div class="aspect-square flex items-center justify-center">
              <!-- 动态 Tud0 图标 -->
              <div class="text-[8rem] font-black text-shadow-neon text-neonPink pulse-animation">
                Tud0
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 特效展示区 -->
  <section id="effects" class="py-20 px-4 relative z-10">
    <div class="container mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4">
          Tud0 <span class="text-neonBlue">炫酷特效</span>
        </h2>
        <div class="w-24 h-1 bg-gradient-to-r from-neonBlue to-neonPink mx-auto"></div>
        <p class="text-gray-400 mt-6 max-w-2xl mx-auto">
          探索 Tud0 的多种动态特效，每一种都融合了现代网页技术与视觉设计
        </p>
      </div>

      <div class="grid md:grid-cols-3 gap-8">
        <!-- 特效卡片 1 -->
        <div class="bg-darkBg/80 rounded-xl border border-neonPurple/30 p-6 hover:border-neonPink/60 transition-all duration-500 group">
          <div class="w-16 h-16 bg-neonPurple/20 rounded-lg flex items-center justify-center mb-6 group-hover:bg-neonPink/20 transition-all duration-300">
            <i class="fa fa-lightbulb-o text-2xl text-neonPink group-hover:text-neonBlue transition-colors duration-300"></i>
          </div>
          <h3 class="text-xl font-bold mb-4 text-white group-hover:text-neonBlue transition-colors duration-300">霓虹文字特效</h3>
          <p class="text-gray-400 mb-6">
            动态霓虹光效文字，悬停时产生缩放和旋转动画，搭配渐变阴影，营造强烈的科技感。
          </p>
          <a href="#home" class="text-neonPink hover:text-neonBlue transition-colors duration-300 inline-flex items-center">
            查看效果 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>

        <!-- 特效卡片 2 -->
        <div class="bg-darkBg/80 rounded-xl border border-neonPurple/30 p-6 hover:border-neonPink/60 transition-all duration-500 group">
          <div class="w-16 h-16 bg-neonPurple/20 rounded-lg flex items-center justify-center mb-6 group-hover:bg-neonPink/20 transition-all duration-300">
            <i class="fa fa-circle-o text-2xl text-neonPink group-hover:text-neonBlue transition-colors duration-300"></i>
          </div>
          <h3 class="text-xl font-bold mb-4 text-white group-hover:text-neonBlue transition-colors duration-300">粒子背景</h3>
          <p class="text-gray-400 mb-6">
            全屏动态粒子背景，粒子之间产生随机连接效果，随鼠标移动变化，增强页面层次感。
          </p>
          <a href="#" class="text-neonPink hover:text-neonBlue transition-colors duration-300 inline-flex items-center">
            查看效果 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>

        <!-- 特效卡片 3 -->
        <div class="bg-darkBg/80 rounded-xl border border-neonPurple/30 p-6 hover:border-neonPink/60 transition-all duration-500 group">
          <div class="w-16 h-16 bg-neonPurple/20 rounded-lg flex items-center justify-center mb-6 group-hover:bg-neonPink/20 transition-all duration-300">
            <i class="fa fa-magic text-2xl text-neonPink group-hover:text-neonBlue transition-colors duration-300"></i>
          </div>
          <h3 class="text-xl font-bold mb-4 text-white group-hover:text-neonBlue transition-colors duration-300">脉冲边框动画</h3>
          <p class="text-gray-400 mb-6">
            按钮和卡片边框的脉冲光效动画，循环放大缩小，吸引用户注意力，提升交互体验。
          </p>
          <a href="#home" class="text-neonPink hover:text-neonBlue transition-colors duration-300 inline-flex items-center">
            查看效果 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- 联系区域 -->
  <section id="contact" class="py-20 px-4 bg-darkBg/50 backdrop-blur-sm relative z-10">
    <div class="container mx-auto">
      <div class="text-center mb-16">
        <h2 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4">
          联系 <span class="text-neonPink">Tud0</span>
        </h2>
        <div class="w-24 h-1 bg-gradient-to-r from-neonPink to-neonBlue mx-auto"></div>
      </div>

      <div class="max-w-2xl mx-auto bg-darkBg/80 rounded-xl border border-neonPurple/30 p-8">